<template>
	<view class="page">
		<navHead :datas="headData"></navHead>
		<view class="content_box">
			<view class="card pd-30">
				<view class="car_item pd-20 c-33 bd-r40" :class="{ 'card_active': item.is_default == 1 }"
					v-for="(item, index) in addressList" :key="index">
					<view class="car_item_title ft-28 fw-800">{{ item.name }} {{ item.phone }}
						<span class="defaultM" v-if="item.is_default == 1">默认</span>
					</view>
					<view class="car_item_text ft-24 c-66 mt-20">{{ item.area.join('') }}{{ item.addr }}</view>
					<view class="car_item_btn flex-bwt mt-40">

						<view class="checkBox mr-8">
							<view class="yuan flex" @click="setDefault(item.id)">
								<image class="icons" v-if="item.is_default == 1"
									:src="`https://cdn.oss.bon-top.cn/static_bc/images/check.png`">
								</image>
								<image class="icons" v-else
									:src="`https://cdn.oss.bon-top.cn/static_bc/images/un_check.png`">
								</image>
								<span class="ml-8 ft-24 c-66">{{ item.is_default == 1 ? '已默认' : '设为默认' }}</span>
							</view>
						</view>
						<view class="btnGrop flex">
							<view class="btnItem" @click="delAddress(item.id)">删除</view>
							<!-- <view class="btnItem" @click="copyAddress()">复制</view> -->
							<up-copy :content="`收件人: ${item.name}
												手机号码: ${item.phone}
												所在地区: ${item.area.join('')}
												详细地址: ${item.addr}`">
								<text class="btnItem">复制</text>
							</up-copy>
							<view class="btnItem avtive"
								@click="goPage('/subpackage/address/addAddress?id=' + item.id)">
								修改
							</view>
						</view>
					</view>
				</view>
				<view class="com-empty" v-if="addressList.length == 0">暂无数据</view>
			</view>
			<view style="height: 180rpx;"></view>
		</view>
		<view :style="{ height: (98 + 68) + 'rpx' }"></view>

		<view class="btn_box flex-center">
			<view class="btn bd-r20" @click="goAddress">新增收件地址</view>
		</view>
	</view>
	<dialogPop ref="diaLogPop" :show="showModal" title="删除地址" content='确定要删除该地址吗?' @confirm='confirm' @cancel='cancel'>
	</dialogPop>
</template>

<script setup lang="js">
import {
	ref,
	reactive
} from 'vue';
import dialogPop from '@/components/dialogPop.vue';
import navHead from '@/components/navHead.vue';
import {
	utils
} from '@/utils/utils.js';
import {
	api
} from '@/utils/api.js';
import {
	onShow,
	onLoad,
	onReachBottom
} from "@dcloudio/uni-app";

const headData = reactive({
	color: '#fff',
	title: '收件地址'
})
const checkd = ref(0)
const checkdStr = ref('设为默认')
const changCheckd = (data) => {
	checkd.value = !checkd.value
	checkdStr.value = checkd.value ? '已默认' : '设为默认'
}
const option = reactive({
	html: `确定要删除该地址吗？`,
	title: '删除地址',
})
const copyAddress = () => { }
// 弹窗取消时处理逻辑
const cancel = () => {
	showModal.value = false

}
const showModal = ref(false)
// 弹窗删除提交
const confirm = () => {
	showModal.value = false
	utils
		.request(
			api.deleteAddress, { id: addressId.value },
			"post"
		)
		.then((res) => {
			addressList.value = []

			reloadData()
		});
}
// 打开弹窗
const diaLogPop = ref('diaLogPop')
const changeAddress = () => {
	showModal.value = true

}
// 跳转
const goPage = (url) => {
	uni.navigateTo({
		url: url,
		events: {
			// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
			getListApi: function (data) {
				console.log('jjjjjj')
				addressPage.value = 1
				addressList.value = []
				isMor.value = true
				addressLoading.value = true
				getAddressListData()

			},


		}
	});
}
const goAddress = () => {
	uni.navigateTo({
		url: '/subpackage/address/addAddress?type=add',
		events: {
			// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
			getListApi: function (data) {
				console.log('jjjjjj')
				addressPage.value = 1
				addressList.value = []
				isMor.value = true
				addressLoading.value = true
				getAddressListData()

			},


		}
	})
}

const addressId = ref('')
const delAddress = (id) => {
	addressId.value = id
	changeAddress()
}

const setDefault = (id) => {
	utils
		.request(
			api.setDefaultAddress, { id: id },
			"post"
		)
		.then((res) => {
			reloadData()
		});
}
const isMor = ref(false)
const reloadData = () => {
	addressPage.value = 1
	// addressList.value = []
	isMor.value = true
	addressLoading.value = true
	getAddressListData()
}

// 页面显示时检测刷新标记
onShow(() => {
	// const app = getApp();
	// console.log('app.globalData.shouldRefresh',app.globalData.shouldRefresh)
	// if (app.globalData.shouldRefresh) {
	// 	reloadData()
	// 	app.globalData.shouldRefresh = false;
	// }
})

const addressPage = ref(1)
const addressList = ref([])
const addressLoading = ref(true)
const getAddressListData = () => {
	if (!addressLoading.value) {
		return
	}
	uni.showLoading()
	addressLoading.value = false
	utils
		.request(
			api.getAddressList, {
			page: addressPage.value,
			pageSize: 10
		},
			"get"
		)
		.then((res) => {
			addressPage.value++

			if (res.data.items.length > 0) {

				if (isMor.value) addressList.value = []
				addressList.value = addressList.value.concat(res.data.items)
				isMor.value = false

			}
			if (addressPage.value <= res.data.pageInfo.totalPage) {
				addressLoading.value = true
			}
			uni.hideLoading()
		});
}

onLoad((options) => {
	getAddressListData()
})

onReachBottom(() => {
	getAddressListData()
})

</script>

<style lang="scss" scoped>
.content_box {
	.card {
		.card_active {

			background: linear-gradient(to bottom, #FBFFDF, #F8F8F8);
		}

		.car_item {
			margin-bottom: 30rpx;
			background-color: #F8F8F8;

			&_title {
				.defaultM {
					font-size: 20rpx;
					color: #fff;
					background-color: #1F18EE;
					border-radius: 8rpx;
					padding: 4rpx;
					font-weight: 400;
				}
			}

			.checkBox {
				flex-shrink: 0;

				.noCheckd {
					width: 20rpx;
					height: 20rpx;
					border: 2rpx solid #000
				}

				.icons {
					width: 24rpx;
					height: 24rpx;
				}
			}

			&_btn {
				align-items: flex-end;

				.btnGrop {
					.btnItem {
						padding: 12rpx 20rpx;
						background-color: #fff;
						border-radius: 20rpx;
						margin-left: 20rpx;
						font-size: 24rpx;
					}

					.avtive {
						background-color: #333;
						color: #fff;
					}
				}
			}
		}
	}
}

.btn_box {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	align-items: start;
	justify-content: flex-end;
	background-color: #F8F8F8;
	box-sizing: border-box;
	padding: 10rpx 30rpx;
	padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
	box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);

	.btn {
		width: 100%;
		height: 78rpx;
		line-height: 78rpx;
		text-align: center;
		background-color: #333;
		color: #DBF046;
	}
}
</style>